<template>
	<view class="wrap">
		<view class="card box1">
			<view class="card-box">
				<view class="card-img">
					<image :src="imgUrl" mode="aspectFill"></image>
				</view>
				<view class="card-title">
					<view class="title1">{{filterNull(brandName)+" "+filterNull(seriesName)+" "+filterNull(modelName)}}</view>
				</view>
				           
				
			</view>
		</view>
		<view class="search-sty">
			<view class="serach-wrap">	
				<u-search shape="square" v-model="keywords" bgColor="#F5F5F5" placeholder="请输入门店/经销商查询"
					placeholderColor="#CDCDCD" :showAction="false" @search="doSearch(keywords)" @change="inputchange"></u-search>
			</view>
		</view>
		<view class="swiper-item">
			<view class="page-box" v-if="storeList.length > 0">
				<view v-for="(item, index) in storeList" :key="index" style="margin: 20upx 24upx 0;">
					<view>
						<StoreCard @pricesSelect=storPrice @storSelect=storSelect  :storeName="item.deptName" :storeId="item.storeId" :deposit="item.deposit"
							:storeAddress="item.contactAddress" :distance="item.distanceDesc" :brandName='brandName' :monthlyRent='item.monthlyRent' :schemeType='item.schemeType'
							:seriesName='seriesName' :modelName='modelName' :schemeId='item.schemeId' :subSchemeId='item.subSchemeId' :subSchemeRentId='item.subSchemeRentId'
							:downPayment='item.downPayment' :phone="item.deptPhone" :tenantName='item.tenantName'>
						</StoreCard>
					</view>
				</view>
			</view>
			<no-data v-if="storeList.length === 0"></no-data>
		</view>
		<!-- 登录弹窗 -->
		<LoginMask></LoginMask>
		<view v-if='priceStatsu'>
			<u-popup  :show="priceStatsu" mode="bottom" round="10" style="position: relative">
				<view class='info-box'>
					<view class='title-box'>
						<view class='title-box-text'>询问价格</view>
						<view class="close-img-box" @click='priceStatsu=false'>
							<image class="close-img" src="../../static/window_icon_close.png"></image>
						</view>
						
					</view>
					<view class='value-box'>
						<view class='text-box'>
							<view>
								<text>门店</text><text class='icon'>*</text>
							</view>
							<view clss='text-value'>{{storeName}}</view>
						</view>
						<view class='text-box-line'></view>
						<view class='text-box'>
							<view>
								<text>车系</text><text class='icon'>*</text>
							</view>
							<view clss='text-value'>{{seriesName}}</view>
						</view>
						<view class='text-box-line'></view>
						<view class='text-box'>
							<view>
								<text>车型</text><text class='icon'>*</text>
							</view>
							<view clss='text-value'>{{modelName}}</view>
						</view>
						<view class='text-box-line'></view>
						<view class='text-box'>
							<view>
								<text>姓名</text><text class='icon'>*</text>
							</view>
							<view clss='text-value'>
								<u--input v-model="userName" placeholder="请输入姓名" inputAlign="left" border="none"></u--input>
							</view>
						</view>
						<view class='text-box-line'></view>
						<view class='text-box'>
							<view>
								<text>联系电话</text><text class='icon'>*</text>
							</view>
							<view clss='text-value'>
								<u--input v-model="userPhone" placeholder="请输入手机号" inputAlign="left" border="none"></u--input>
							</view>
						</view>
					</view>
					<view class='button-box'>
					    <view class="bottom_btns savepadding" :class="isIos?'bottom3':''">
					        <view class="button" @click="priceStatsu= false">取消</view>
					        <view class="button" @click="confirm()">提交</view>
					    </view>
					</view>
				</view>
			</u-popup>	
		</view>	
		<view v-if='isImprove' class='phoneSty'>{{improveTtile}}</view>
	</view>
</template>

<script>
	import storeCell from '@/components/coupon/store-cell.vue'
	import StoreCard from '@/components/card/store-card.vue';
	import * as loginApi from '@/common/apis/login-api';
	import LoginMask from '@/components/layout/login-mask.vue';
	import {
		schemeinfo
	} from '../../common/api.js';
	import * as HomeApi from '@/common/apis/home-api';
import * as relaNameApi from '@/common/apis/relaName-api';

	export default {
		components: {
			storeCell,
			StoreCard,
			LoginMask,
		},
		data() {
			return {
				cityName:'北京市',
				storeList: [],
				keywords:'',
				storeId:'',
				brandName:'',
				seriesName:'',
				modelName:'',
				imgUrl:'',
				dataDetail: {},
				schemeId:'',
				userName:'',
				userPhone:'',
				priceStatsu:false,
				storeName:'',
				isImprove:false,
				improveTtile:'',
				subSchemeId:'',
				subSchemeRentId:'',
				modelId:'',
				modelName:'',
				brandName:'',
				seriesName:'',
				schemeType:'',
				selectSchemeId:'',
			}
		},
		computed: {
			openid() {
				return this.$store.state.user.openid;
			},
			storeInfo() {
				return this.$store.state.app.storeInfo;
			},
			isNotLogin() {
				return uni.$u.test.isEmpty(this.$store.state.user.userInfo);
			}
		},
		onLoad(op) {
			console.log(op,'门店回来的参数')
			this.schemeId = op.schemeId
			this.subSchemeId = op.subSchemeId
			this.subSchemeRentId = op.subSchemeRentId
			this.modelId = op.modelId
			this.modelName = op.modelName
			this.brandName = op.brandName
			this.seriesName = op.seriesName
			this.schemeType = op.schemeType
			
			// #ifndef H5
			if(op.schemeId){
				this.getData() 
			}
			this.getStore();
			// #endif
			this.cityName = uni.getStorageSync('cityName')?uni.getStorageSync('cityName'):'北京市';
			uni.$on('emit', res=>{
				this.cityName = res
			})
			
		},
		onShow() {
			// #ifdef H5
			this.getData() 
			// #endif
			this.userPhone = uni.getStorageSync('phone')
			
		},
        onUnload(){
			uni.$off('emit')
		},
		methods: {
			confirm(){	
				if (!/^1[3456789]\d{9}$/.test(this.userPhone)){
				    uni.showToast({
				        title: '手机号错误',
				        icon: 'error',
				        duration: 2000
				    });
				    return;
				}
				if(uni.$u.test.isEmpty(this.userName)){
					uni.showToast({
					    title: '请完善必填信息!',
					    icon: 'none',
					    duration: 2000
					  });
					return
				}
				
				let param = {
					modelId:this.modelId,
					contact:this.userName,
					phone:this.userPhone,
					storeId:this.storeId,
					schemeType:this.dataDetail.schemeType
				}
				try {
				    const result = HomeApi.cluessourcedriver(param);
				    uni.showToast({ title: '提交成功', icon: 'success' });
					this.priceStatsu = false
				    
				} catch (error) {
				    uni.showToast({ title: error, icon: 'error' });
				}
				
			},
			// 询问价格
			storPrice(info){
				console.log(info,'infoinfoinfo')
				this.storeId = info.storeId
				this.priceStatsu=info.isShow,
				this.storeName= info.storeName
			},
			// 选择门店,开始下单
			storSelect(id){
				this.storeList.map((item)=>{
					if(item.storeId==id){
						this.$store.commit('user/savedeptId', item.storeId);
						this.$store.commit('app/setStoreInfo', item);
						uni.setStorageSync('storeId', item.storeId);
						uni.setStorageSync('storeName', item.storeName);
						this.selectSchemeId = item.schemeId
						this.goAddOrder()
					}
				})	
			},
			async goAddOrderHandle(path) {
				let imgurl = this.dataDetail?.carModelUrlList?.length>0?this.dataDetail?.carModelUrlList[0]:''
				// 拼接跳转地址
				var url = path +
					"?brandName=" + this.dataDetail.brandName + // 品牌名称
					"&seriesName=" + this.dataDetail.seriesName + // 车系名称
					"&modelName=" + this.dataDetail.modelName + // 车型名称
					"&modelId=" + this.dataDetail.modelId + // 车型id
					"&schemeId=" + this.selectSchemeId + // 方案id
					"&subSchemeId=" + this.subSchemeId + // 子方案id
					"&subSchemeRentId=" + this.subSchemeRentId + // 卡文子方案id
					"&schemeType=" + this.dataDetail?.schemeType + // 方案类型(1.直购，2分期购车，3租赁 4.金融分期)
					"&schemeTypeStr=" + this.dataDetail?.schemeTypeStr+ // 方案类型名称
					"&imgUrl="+ imgurl // 方案类型名称
					if (6 == this.bizType) {
						//试驾
						uni.navigateTo({
							url
						});
					} else {
						if (1 == this.dataDetail.schemeType) {
							//直购
							uni.navigateTo({
								url
							});
						} else {
							//其他
							if (url.indexOf('ask-price') > -1) {
								//询问价格不需要认证，直接跳转
								uni.navigateTo({
									url
								});
							} else {
								uni.navigateTo({
									url
								});
							}
				
				
						}
				}
			
			},
			
			async goAddOrder() {
				const  path = '/pages/select-store/select-store'
				const url = path +"?bizType=" + this.bizType + "&schemeId=" + this.selectSchemeId  + "&subSchemeId=" + this.subSchemeId  + "&subSchemeRentId=" + this.subSchemeRentId + "&modelId=" + this.modelId + "&modelName=" + this.dataDetail.modelName
				const deptId = uni.getStorageSync('storeId')
				const result = await relaNameApi.valiAuthentication({ deptId });
				if (result != 2) {
					uni.navigateTo({
						url: '/pages/real_name/real_name?redirect=' + encodeURIComponent(url),
					});
				}else{
					if (6 == this.bizType) {
						//试驾
						this.goAddOrderHandle('/pages/testDrive/experience-now');
					} else {
						if (1 == this.dataDetail.schemeType) {
							//直购
							this.goAddOrderHandle('/pages/car/buy');
						} else {
							//其他
							this.goAddOrderHandle('/pages/schemeSelection/schemeSelection');
						}
					}
				}
				
			
			},
			getData() {
				schemeinfo({
					params: {
						subSchemeId:this.subSchemeId,
						subSchemeRentId:this.subSchemeRentId,
						cityCode:uni.getStorageSync('cityCode')
					}
				}).then(res => {
					this.brandName = res.brandName
					this.seriesName = res.seriesName
					this.modelName = res.modelName
					this.schemeType = res.schemeType
					this.imgUrl = res.carModelUrlList.length>0?res.carModelUrlList[0]:""
					this.dataDetail = res;
					// #ifdef H5
					this.getStore();
					// #endif
				})
			},
			doSearch(){
				this.getStore();
			},
			inputchange(value){
				uni.$u.debounce(this.doSearch, 1500);
				
			},

			getStore() {
				loginApi.storelist({
					keywords: this.keywords,
					modelId:this.modelId,
					modelName:this.modelName,
					brandName:this.brandName,
					seriesName:this.seriesName,
					schemeType:this.schemeType,
					cityCode: uni.getStorageSync('cityCode')?uni.getStorageSync('cityCode'):110000,
				}).then(res => {
					this.storeList = [];
					this.storeList = res	
				})
			},		
			onclick(item) {
				this.$store.commit('user/savedeptId', item.storeId);
				this.$store.commit('app/setStoreInfo', item);
				uni.setStorageSync('storeId', item.storeId);
				uni.setStorageSync('storeName', item.storeName);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.button-box{
		.bottom_btns {
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    text-align: center;
		    position: fixed;
		    bottom: 32upx;
		    left: 0;
		    width: 90%;
			padding:0 32upx;
		    z-index: 10;
		    background: #fff;
		    .button {
		        line-height: 80upx;
				width:328upx;
				height: 80upx;
				border:1px solid #173B42 ;
				border-radius: 8upx;
		    }
		
		    .button:nth-child(1) {
		        background: #fff;
		        color: #173B42;
				margin-right:30upx ;
		    }
		
		    .button:nth-child(2) {
		        background: #173b42;
		        color: #fff;
		    }
		}
		.bottom3{
			position:absolute;
			bottom: 70upx;
		}
	}
	.value-box{
		margin-bottom: 100upx;
		max-height: 600upx;
		overflow-y: auto;
		background:#ffffff;
		border-radius: 8upx;
		padding:32upx;
		margin-bottom: 130upx;
	}
	.info-box{
		background-color:#F8F8F8 ;
		padding:32upx;
		.text-box{
			display: flex;
			justify-content: flex-start;
			margin:32upx 0;
			text{
				color:#666666;
				font-size:28upx;
			}
			.icon{
				color:#FF6A15;
				margin-right:44upx;
			}
			.text-value{
				color:#000000;
				font-size:28upx;
			}
		}
		.text-box-line{
			width:100%;
			height: 1upx;
			background-color: #F8F8F8 ;
			margin:0 32px;
		}
		.bottom2 {
			position:absolute;
			bottom: 30upx;
			width: 90%;
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			background-color: $redec;
			border-radius: 8upx;
			color:#ffffff;
			font-size: 32upx;
		}
		.bottom3{
			position:absolute;
			bottom: 70upx;
		}
		.title-box{
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-bottom: 32upx;
			.title-box-text{
				font-size:32upx ;
				font-weight: bold;
				color:#000000,
				
			}
			.close-img-box{
				width:34upx ;
				height:34upx;
				
				.close-img{
					width:32upx ;
					height:32upx;
				}
			}
			
		}
	}
	.box1{
		background-image: url('../../static/矩形@2x.png');
		background-size: cover;
	}
	.search-sty{
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding:16upx 0;
		margin-top:16upx;
	}
	.card {
		.card-box{
			.card-title{
				.title1 {
				    font-size: 32upx;
				    font-weight: bold;
				    color: #000000;
				    margin-bottom: 18upx;
					padding:32upx;
				}
				.desc {
				    font-size: 24upx;
				    color: #999999;
				}
			}
			.card-img{
				width:100%;
				height: 300upx;
				image {
				    width: 100%;
				    height: 100%;
				}
			}
		}
	    .title {
	        font-size: 32upx;
	        font-weight: bold;
	        color: #000000;
	        margin-bottom: 40upx;
	    }
	}
	.wrap {
		// padding: 10upx 25upx;
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	 .serach-wrap {
		width: 90%;
		background: #F5F5F5;
		border-radius: 8upx;
	}
	.cityNameStyle{
		font-size: 14px;
		margin-left: 5px;
		display: flex;
		color:#000000;
		.cityNameText{
			margin-right: 3px;
			width: 70%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.swiper-box {
		flex-grow: 1;
	}

	.swiper-item {
		height: 100%;
	}
	.phoneSty{
		position: fixed;
		top:40%;
		left:36%;
		width: 192upx;
		height:44upx ;
		background-color:#000000 ;
		color:#ffffff;
		padding:24upx 32upx;
		text-align: center;
		line-height: 44upx;
		border-radius: 8upx;
		z-inde:9999;
	}
</style>
